<template>
	<view class="rankList">
		<comHead :title="$t('index.sdgxb')" :isLeft="true" :isRight="false" rType="rankList"></comHead>
		<view class="contentBox">
			<view class="box">
<!-- 				<view class="titBtn">
					<view class="item" @click="toggleBang(1)" :class="active==1?'on':''">
						<text>周榜</text>
						<image src="https://siha.vxmeng.com/static/more/ps.png" mode="widthFix"></image>
					</view>
					<view class="item" @click="toggleBang(2)" :class="active==2?'on':''">
						<text>总榜</text>
					</view>
				</view> -->
				<view class="qs">
					<view class="item" v-if="episodeCharacterBang.length>1" :class="episodeCharacterBang.length==2?'margin':''">
						<view class="imgs">
							<image :src="getImg(episodeCharacterBang[1].avatar)"
								mode="aspectFill"></image>
							<image src="https://siha.vxmeng.com/static/my/MasterDDSSlicePNG51aefe9b1c65a52226508f5bbf9c3a51.png"
								mode="aspectFill"></image>
						</view>
						<text>{{episodeCharacterBang[1].nickname}}</text>
						<view class="dou">
							<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
							<text>{{episodeCharacterBang[1].total_money}}</text>
						</view>
						<image src="https://siha.vxmeng.com/static/index/d2.png" mode="widthFix"></image>
						<image class="bg" src="https://siha.vxmeng.com/static/index/no.2.png" mode="widthFix"></image>
					</view>
					<view class="item" v-if="episodeCharacterBang.length>0">
						<view class="imgs">
							<image :src="getImg(episodeCharacterBang[0].avatar)"
								mode="aspectFill"></image>
							<image src="https://siha.vxmeng.com/static/my/MasterDDSSlicePNG51aefe9b1c65a52226508f5bbf9c3a51.png"
								mode="aspectFill"></image>
						</view>
						<text>{{episodeCharacterBang[0].nickname}}</text>
						<view class="dou">
							<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
							<text>{{episodeCharacterBang[0].total_money}}</text>
						</view>
						<image src="https://siha.vxmeng.com/static/index/d1.png" mode="widthFix"></image>
						<image class="bg" src="https://siha.vxmeng.com/static/index/no.1.png" mode="widthFix"></image>
					</view>
					<view class="item" v-if="episodeCharacterBang.length>2" >
						<view class="imgs">
							<image :src="getImg(episodeCharacterBang[2].avatar)"
								mode="aspectFill"></image>
							<image src="https://siha.vxmeng.com/static/my/MasterDDSSlicePNG51aefe9b1c65a52226508f5bbf9c3a51.png"
								mode="aspectFill"></image>
						</view>
						<text>{{episodeCharacterBang[2].nickname}}</text>
						<view class="dou">
							<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode="widthFix"></image>
							<text>{{episodeCharacterBang[2].total_money}}</text>
						</view>
						<image src="https://siha.vxmeng.com/static/index/d3.png" mode="widthFix"></image>
						<image class="bg" src="https://siha.vxmeng.com/static/index/no.3.png" mode="widthFix"></image>
					</view>
					
					<image class="bot" src="https://siha.vxmeng.com/static/index/bot.png" mode="widthFix"></image>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in episodeCharacterBang" v-if="index>=3">
						<view class="l">
							<text>{{index+1}}</text>
						</view>
						<view class="m">
							<image :src="getImg(item.avatar)"
								mode="aspectFill"></image>
							<text>{{item.nickname}}</text>
						</view>
						<view class="r">
							<image src="https://siha.vxmeng.com/static/index/shop/dou.png" mode=""></image>
							<text>{{item.total_money}}</text>
						</view>
					</view>
				</view>
				<view class="my">
					<view class="l">
						<image :src="getImg(user_bang.avatar)"
							mode="aspectFill"></image>
					</view>
					<view class="m">
						<view>{{user_bang.nickname}}</view>
						<text>{{$t('index.gxz')}} {{user_bang.user_num}}</text>
						<text v-if="user_bang.bang_num!=1">{{$t('index.jlqyw')}} {{user_bang.shang_cha}} {{$t('index.gxz')}}</text>
					</view>
					<view class="r">
						<text>{{user_bang.bang_num}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				noMore: false,
				page: 1,
				episode_script_id:'',
				episodeCharacter:[],
				episodeCharacterBang:[],
				user_bang:[]
			}
		},
		onLoad(options) {
			console.log(options)
			this.episode_script_id = options.episode_script_id
			this.getEpisodeVoteBang()
		},
		methods: {
			toggleBang(num){
				this.$music.play_click_1()
				this.active = num;
			},
			// async getEpisodeCharacter() {
			// 	const res = await this.$myRequest({
			// 		url: 'api/episode/getEpisodeCharacter',
			// 		data: {
			// 			episode_script_id:this.episode_script_id
			// 		}
			// 	})
			// 	if (res.code == 1) {
			// 		console.log(res)
			// 		this.episodeCharacter = res.data.list
			// 		this.getEpisodeCharacterBang(0)
			// 	}
			// },
			async getEpisodeVoteBang() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeVoteBang',
					data: {
						episode_script_id:this.episode_script_id
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.user_bang = res.data.user_bang
					if(res.data.list.length == 0){
						this.noMore = true
						return
					}
					this.episodeCharacterBang = [...this.episodeCharacterBang, ...res.data.list]
					if(this.episodeCharacterBang.length > 100){
						this.episodeCharacterBang.length = 100
					}
				}
			},
		},
		onReachBottom(){
			if(this.episodeCharacterBang.length < 100 && !this.noMore){
				this.page++
				this.getEpisodeCharacterBang(this.active)
			}else{
				this.$tools.showTx(this.$t('gdjj.mygdl'))
			}
		}
	}
</script>

<style lang="less" scoped>
	.rankList {
		min-height: 100vh;
		// background: linear-gradient(147deg, #222222 0%, rgba(30, 36, 44) 104%);
		background-color: #1c0c20;
	}

	.contentBox {
		// height: calc(100vh - 200rpx);
		height: auto;
		overflow: auto;
	}

	.box {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		z-index: 101;
		position: relative;
		// background: linear-gradient(147deg, #222222 0%, rgba(30, 36, 44) 104%);
		border-radius: 24rpx 24rpx 0px 0px;

		.titBtn {
			height: 60rpx;
			width: 100%;
			margin-bottom: 20rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			color: #fff;
			z-index: 1;
			.item{
				height: 100%;
				margin-left: 40rpx;
				
				&.on{
					border-bottom: 4rpx solid #fff;
				}
			}
		}

		.qs {
			height: 600rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin-top: -100rpx;
			
			.bot{
				position: absolute;
				bottom: -4rpx;
				width: 100vw;
			}

			.item {
				margin-bottom: 40rpx;
				width: 200rpx;
				flex-shrink: 0;
				border-radius: 24px;
				// background: linear-gradient(270deg, rgba(#FFCC00, 0.1) 0%, rgba(#FF9D00, 0.1) 100%);
				display: flex;
				padding: 20rpx 20rpx 40rpx;
				box-sizing: border-box;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.bg{
					width: 100%;
					z-index: -1;
					position: absolute;
				}

				&:nth-child(1),
				&:nth-child(3) {
					margin-top: 50rpx;
					// background: linear-gradient(270deg, rgba(#F9EAEB, 0.1) 0%, rgba(#F1D0D3, 0.1) 100%);
				}

				&:nth-child(2) {
					margin: 0 30rpx;
				}

				.imgs {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 132rpx;
					height: 132rpx;

					image {
						width: 96rpx;
						height: 96rpx;

						&:nth-child(2) {
							width: 132rpx;
							height: 132rpx;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}
				
				.dou{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 28rpx;
						height: 28rpx;
						margin-top: 10rpx;
						margin-right: 4rpx;
					}
				}

				text {
					font-size: 24rpx;
					color: #fff;
					display: -webkit-box;
					margin-top: 10rpx;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					text-align: center;
					&:nth-child(3) {
						font-size: 24rpx;
						background: linear-gradient(270deg, #FFCC00 0%, #FF9D00 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}

				>image:not(.bg) {
					width: 60rpx;
					position: absolute;
					top: -50rpx;
					right: 10rpx;
				}
				&.margin{
					margin-left: -200rpx;
				}
			}
		}

		.list {
			display: flex;
			align-items: center;
			min-height: 800rpx;
			// justify-content: space-between;
			flex-direction: column;
			width: 100%;
			padding: 0 30rpx 200rpx;
			box-sizing: border-box;
			background-color: rgb(28, 30, 36);

			// height: calc(100vh - 1100rpx);
			// overflow: auto;
			.item {
				width: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0;
				// background-color: #1F221D;
				background: linear-gradient(99deg, #222222 0%, rgba(30, 36, 44, 0.65) 100%);
				border-radius: 20rpx;
				margin-top: 10rpx;

				.l {
					font-size: 28rpx;
					padding-left: 40rpx;
					width: 50rpx;
				}

				.m {
					display: flex;
					align-items: center;
					width: 60%;
					font-size: 16px;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.r {
					width: 100rpx;
					margin-right: 40rpx;
					image{
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
					}
					text {
						font-size: 24rpx;
						// background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
						background: #FFB400;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						text-fill-color: transparent;
					}
				}
			}
		}
		.my{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 180rpx;
			background: linear-gradient(281deg, rgba(98, 182, 252) 1%, rgba(95, 88, 253) 77%, rgba(95, 88, 253) 99%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 40rpx 60rpx;
			border-radius: 20rpx 20rpx 0 0;
			color: #fff;
			.l{
				width: 100rpx;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.m{
				flex: 1;
				margin-left: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text{
					color: #FFB400;
					font-size: 20rpx;
				}
			}
			.r{
				width: 100rpx;
				font-size: 28rpx;
				text-align: center;
			}
		}
	}
</style>